<template>
  <view v-if="loaded" class="special-work-container" style="padding-bottom: 0">
    <view class="special-work__header">
      <view class="special-work__title">{{ ticket.ticketWorkLevelLabel || '' }}{{ ticket.workTypeLabel }}</view>
      <view class="special-work__code">作业票编号：{{ ticket.ticketCode }}</view>
    </view>
    <view class="special-work__tabs">
      <view class="special-work__tab-item" :class="{ active: tab === 'apply' }" @click="tab = 'apply'">申请信息</view>
      <view class="special-work__tab-item" :class="{ active: tab === 'examine' }" @click="tab = 'examine'"
        >审查信息
      </view>
      <view class="special-work__tab-item" :class="{ active: tab === 'annex' }" @click="tab = 'annex'">附件</view>
    </view>
    <apply-info v-show="tab === 'apply'" :detail="ticketContent" :ticket="ticket" :inspect="inspect || {}" />

    <template>
      <view v-show="tab === 'examine'" style="height: calc(100vh - 265rpx); overflow: hidden">
        <ticket-summary-comp
          :detail="ticketContent"
          :ticket="ticket"
          :ticket-id="ticketId"
          :inspect="inspect"
          :relevance-ticket-label="relevanceTicketLabel"
          :signatures="signatures"
          :cancel-info="cancelInfo"
        />
      </view>
    </template>
    <annex-info v-show="tab === 'annex'" :detail="ticketContent" :ticket="ticket" :inspect="inspect || {}" />
  </view>
</template>

<script>
import {
  getTicketInfoById,
  getTicketActTypeDetail,
  getTicketSignatures,
  getTicketCancelInfo
} from '@/api/spw/ticketApply'
import ApplyInfo from './components/ApplyInfo.vue'
import AnnexInfo from './components/AnnexInfo.vue'
import Empty from '@/components/cu-empty/index.vue'
import TicketSummaryComp from './components/tickets/TicketSummaryComp.vue'
export default {
  components: {
    TicketSummaryComp,
    Empty,
    ApplyInfo,
    AnnexInfo
  },
  async onLoad(option) {
    this.ticketId = option.ticketId
    const [res1, res2, res3, res4] = await Promise.all([
      getTicketActTypeDetail(option.ticketId),
      getTicketInfoById(option.ticketId),
      getTicketSignatures(option.ticketId),
      getTicketCancelInfo(option.ticketId)
    ])
    this.signatures = res3.data
    this.cancelInfo = res4.data
    res2.data.hazardMediaLibList = res2.data.hazardMediaLibList?.map((item) => item.analysisItem).join(';') // 危害介质内容

    this.ticketContent = res2.data.ticketContent ? JSON.parse(res2.data.ticketContent) : {}
    this.ticket = res2.data
    for (const key in res1.data) {
      res1.data[key].map((item) => {
        item.reviewerSignatureUrl = item.reviewerSignatureUrl ? item.reviewerSignatureUrl.split(',') : ''
        item.ticketReviewContent = item.ticketReviewContent ? JSON.parse(item.ticketReviewContent) : []
        return item
      })
    }
    if (res1.data && Object.keys(res1.data).length) {
      this.inspect = res1.data
    }
    this.setRelevanceTicketData(res2.data.relateTickets)
    this.setRiskIdentificationResult(res2.data.riskIdentification)
    this.loaded = true
  },
  data() {
    return {
      ticketId: '',
      tab: 'apply',
      loaded: false,
      ticketContent: null,
      ticket: null,
      inspect: null,
      relevanceTicketData: [],
      cancelInfo: [],
      signatures: [],
      riskIdentificationResult: '',
      relevanceTicketLabel: '' // 关联作业票
    }
  },

  methods: {
    /**
     * 设置关联的作业票
     */
    setRelevanceTicketData(data) {
      if (!data?.length) {
        this.relevanceTicketLabel = '/'
        return
      }
      this.relevanceTicketLabel = data
        .map((item) => {
          if (item.blandPlateType) {
            return `${item.blandPlateType}${item.ticketCode}(抽堵关联)`
          }
          return `${item.workTypeLabel}${item.ticketCode}`
        })
        .join('、')
    },
    setRiskIdentificationResult(data) {
      data = data ? JSON.parse(data) : []
      this.ticket.riskIdentificationResultLabel = data.map((pet) => pet.riskType).join('，')
    }
  }
}
</script>

<style lang="scss" scoped>
@import './style/style.scss';
</style>
